<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*需求：将div右移100px，下移200px，旋转30度，x轴缩放1.5倍，y轴缩放2倍*/
        .box{
            width: 200px;
            height: 150px;
            margin: 100px auto;
            background-color: #ff0000;
            color: #ffffff;
            /*方法1：常用*/
            -webkit-transform: translate(100px,200px)rotate(30deg)scale(1.5,2);
            -moz-transform: translate(100px,200px)rotate(30deg)scale(1.5,2);
            -ms-transform: translate(100px,200px)rotate(30deg)scale(1.5,2);
            -o-transform: translate(100px,200px)rotate(30deg)scale(1.5,2);
            transform: translate(100px,200px)rotate(30deg)scale(1.5,2);
        
            /*方法2：*/
            /*
            解法：
               1）缩放（1.5，2）形成一个矩阵
                1.5    0    0
                0      2    0
                0      0    1
               2）旋转30度后，又形成一个矩阵
                0.866    -0.5   0
                0.5     0.866   0
                0      0        1
               3)上面两个矩阵要做乘法运算
               0.866    -0.5   0    1.5    0    0       1.299   -1    0
               0.5     0.866   0 × 0      2    0  ＝   0.75    1.732 0
               0      0        1    0      0    1       0       0     1
            */
            /*-webkit-transform: matrix(1.299,0.75,-1,1.732,100,200);*/
            /*-moz-transform: matrix(1.299,0.75,-1,1.732,100,200);*/
            /*-ms-transform: matrix(1.299,0.75,-1,1.732,100,200);*/
            /*-o-transform: matrix(1.299,0.75,-1,1.732,100,200);*/
            /*transform: matrix(1.299,0.75,-1,1.732,100,200);*/
        }
    </style>
</head>
<body>
    <div class="box">matrix函数</div>
</body>
</html>